import { useState, useEffect } from "react";
import { Form, Input, InputNumber, Alert, Select, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import AntdWrapper from "@/components/AntdWrapper";
import { inventoryChange, getWarehouseList } from "../service";
import { getCurrentUser } from "@/utils/authority";
import { WAREHOUSE_TYPE } from "@/views/utils/constant";

const PickAssignmentModal = ({ visible, fetchList, selectedRows, selectedKeys, handleCancel }) => {
	const [form] = Form.useForm();
	const [price, setPrice] = useState("");
	const [changeValue, setChangeValue] = useState(1);
	const [priceValue, setPriceValue] = useState(1);
	const [warehouseList, setWarehouseList] = useState([]);
	const [warehouseId, setWarehouseId] = useState("");

	useEffect(() => {
		if (visible) {
			form.resetFields();
		}
	}, [visible]);
	const onChange = e => {
		setPriceValue(e);
	};
	const getWarehouseLists = async e => {
		const { data, success } = await getWarehouseList({
			kind: e,
			uuid: getCurrentUser().uuid
		});
		if (success) {
			setWarehouseList(data);
		}
		if (e == 2) {
			setWarehouseId(data ? data[0].id : "");
		} else if (e == 3) {
			setWarehouseId(data ? data[0].id : "");
		}
		setValue(e);
	};
	const updateStock = async e => {
		getWarehouseLists(e);
		setChangeValue(e);
	};

	const handleBlur = async event => {
		setPrice(event.target.value);
	};
	const onOk = () => {
		form.validateFields().then(async value => {
			if (!warehouseId) {
				return message.error("请选择修改库存仓");
			}
			if (!price) {
				return message.error("请输入修改数量");
			}
			const extractedList = selectedRows.map(obj => ({ skuId: obj.skuId }));
			if (priceValue == 1) {
				extractedList.map(x => (x.editFlag = true));
				extractedList.map(x => (x.actualNum = priceValue == 3 ? -Number(price) : ""));
			} else if (priceValue == 2) {
				extractedList.map(x => (x.changeActualNum = priceValue == 2 ? Number(price) : ""));
				extractedList.map(x => (x.editFlag = ""));
			} else {
				extractedList.map(x => (x.changeActualNum = priceValue == 3 ? -Number(price) : ""));
				extractedList.map(x => (x.editFlag = ""));
			}
			extractedList.map(x => (x.actualNum = priceValue == 1 ? Number(price) : ""));
			extractedList.map(x => (x.actionType = priceValue == 1 ? 1 : 2));
			extractedList.map(x => (x.warehouseId = warehouseId));
			extractedList.map(x => (x.businessType = "check-stock-change"));
			const { success } = await inventoryChange(extractedList);
			if (success) {
				message.success("编辑成功");
				onCancel();
				fetchList();
			}
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const warehouseSelect = e => {
		setWarehouseId(e);
	};

	const renderAlertMsg = () => {
		return (
			<div className="flex">
				<div>注意：</div>
				<div>
					<div>1.增加的话在原来的正品实际库存基础上直接增加数值</div>
					<div>2.扣减的话需要注意一下除了主仓外其余最小值为0</div>
				</div>
			</div>
		);
	};
	const options =
		warehouseList.length &&
		warehouseList.map(d => (
			<Option key={d.id} label={d.warehouseName}>
				{d.warehouseName}
			</Option>
		));
	return (
		<CommonModal title={{ title: "手动校验修改库存" }} visible={true} onOk={onOk} onCancel={onCancel} minHeight="150px">
			<Alert message={renderAlertMsg()} type="info" showIcon className="mb10" />
			<Form form={form} name="mark-unuaual-modal">
				<AntdWrapper label={<div>修改库存仓：</div>} style={{ width: "100%", marginLeft: 8 }}>
					<div className="flex">
						<Form.Item name="price" label="">
							<Select onChange={updateStock} placeholder="请选择发货仓" style={{ width: 150 }} options={WAREHOUSE_TYPE} />
						</Form.Item>
						<Form.Item name="price1" label="">
							{changeValue == 1 && (
								<Select
									placeholder="请选择发货仓"
									optionFilterProp="label"
									style={{ width: 220 }}
									onChange={e => warehouseSelect(e)}
								>
									{options}
								</Select>
							)}
							{(changeValue == 2 || changeValue == 3) && (
								<Select
									placeholder={changeValue == 2 ? "次品仓" : "销退仓"}
									disabled
									optionFilterProp="label"
									style={{ width: 250 }}
								>
									{options}
								</Select>
							)}
						</Form.Item>
					</div>
				</AntdWrapper>
				<AntdWrapper label={<div>商品库存更改为：</div>} style={{ width: "100%", marginLeft: 8 }}>
					<Form.Item name="actionType" label="">
						<InputNumber
							style={{ width: "100%" }}
							onBlur={handleBlur}
							precision={0}
							bordered={false}
							controls={false}
							min={0}
							size="middle"
							addonAfter="件"
							addonBefore={
								<Select
									placeholder="统一改为"
									style={{ width: 100 }}
									defaultValue={"1"}
									onChange={onChange}
									options={[
										{
											value: "1",
											label: "统一改为"
										},
										{
											value: "2",
											label: "统一添加"
										},
										{
											value: "3",
											label: "统一扣减"
										}
									]}
								/>
							}
						/>
					</Form.Item>
				</AntdWrapper>
			</Form>
		</CommonModal>
	);
};

export default PickAssignmentModal;
